<template>
  <div class="home">
    <div>基础案例</div>
    <!-- 从vuex中获取state数据 -->
    <div>{{$store.state.num}}</div>
    <!-- 基于计算属性进行处理 -->
    <div>{{num1}}</div>
    <div>{{total}}</div>
    <div>
      <button @click='handleClick'>点击</button>
    </div>
  </div>
</template>

<script>
// Vuex专门引入了一个函数简化状态获取操作
import { mapState } from 'vuex'

export default {
  data () {
    return {
      count: 10
    }
  },
  // 这里的num指的是state中的属性名称
  // 把状态中的属性名称直接映射为同名的计算属性
  computed: mapState(['num', 'total']),
  // computed: mapState({
  //   num1: 'num'
  // }),
  methods: {
    handleClick () {
      // this.num = this.num + 1
      // 点击按钮修改状态数据需要触发mutation
      this.$store.commit('updateNum', 1)
    }
  }
}
</script>
